<template>
	<view class="page" :style="{'min-height':h+'px','padding-top':mt+'px'}">
		<c-nav-bar title="租赁车辆"></c-nav-bar>
		<view class="lunbo">
			<u-swiper v-if="car" :list="[car.pic]" @change="e => current = e.current" :autoplay="false" :circular="true"
				indicatorStyle="right: 20px;bottom:20px;color:#fff;background:rgba(17,17,17,.5);padding:4rpx 18rpx;box-sizing:border-box;border-radius:18rpx;"
				height="420rpx">
				<view slot="indicator" class="indicator-num">
					<text class="indicator-num__text">{{ current + 1 }}/{{ [car.pic].length }}</text>
				</view>
			</u-swiper>
		</view>
		<view class="bc_info">
			<view class="bci_top">
				<view class="bcit_name">{{car.name||''}}</view>
			</view>
			<view class="bci_pzs">
				<view>{{car.carPower||''}}</view>
				<view>{{categaryCfg[car.categary]||''}}</view>
				<view>{{driversTypeCfg[car.driversType]||''}}</view>
				<view>{{car.seat||''}}座</view>
			</view>
			<view class="bci_price">
				<text>￥{{car.price||''}}</text>
				<span>/天</span>
			</view>
			<view class="bci_tips">
				<image v-if="car.insureType==0"
					src="https://i.ringzle.com/file/20231128/44923c2a524846c2b37bcc02dac55d38.png"></image>
				<view class="bcit_box" v-if="car.takeDeliverType===0">上门取送</view>
				<view class="bcit_box" v-if="car.depositType>=0">{{depositTypeCfg[car.depositType]}}</view>
				<view class="bcit_box bb_dcyx" v-if="car.reverseImageType===0">倒车影像</view>
			</view>
		</view>
		<view v-for="(company,index) in car.companyList" v-if="car.companyList" :key="index" @tap="toCompany(company)"
			class="bc_info b_item">
			<view class="bci_top">
				<view class="bcit_name">{{company.corporateName}}</view>
				<view class="bcit_bj">
					<text>{{company.leasableNumber}}辆可租</text>
					<image src="https://i.ringzle.com/file/20231128/05b6218930fb49cc8fd6fdcdde6a86f9.png"></image>
				</view>
			</view>
			<view class="be_addr">
				<image src="https://i.ringzle.com/file/20231128/14ce31c27e374086aaf3d5f67c11db7b.png"></image>
				<text>{{company.position}}</text>
			</view>
			<view class="bci_price">
				<text>￥{{company.price}}</text>
				<span>/天</span>
			</view>
			<view class="bci_tips">
				<image v-if="company.insureType==0"
					src="https://i.ringzle.com/file/20231128/44923c2a524846c2b37bcc02dac55d38.png"></image>
				<view class="bcit_box" v-if="company.takeDeliverType===0">上门取送</view>
				<view class="bcit_box" v-if="company.depositType>=0">{{depositTypeCfg[company.depositType]}}</view>
				<view class="bcit_box bb_dcyx" v-if="company.reverseImageType===0">倒车影像</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				categaryCfg: {
					0: '自动挡',
					1: '手动挡'
				},
				// driversTypeCfg: {
				// 	1: 'C1驾照',
				// 	2: 'B2驾照',
				// 	3: 'A2驾照',
				// 	4: 'A1驾照'
				// },
				driversTypeCfg: {
					1: 'C1驾照',
					2: 'C2驾照',
					3: 'B2驾照',
					4: 'A1驾照',
					5: 'A2驾照'
				},
				depositTypeCfg: {
					0: '芝麻免押金',
					1: '押金￥500',
					2: '押金￥1000',
					3: '押金￥1500',
					4: '押金￥2000'
				},
				current: 0,
				car: null
			}
		},
		onLoad(option) {
			this.car = {
				pic:'https://fsy.shengsi.gov.cn/file/20240730/d1ccd9e25d6347aab97e6f17141aaa8b.png'
			}
			if (option.item) {
				this.car = JSON.parse(decodeURIComponent(option.item));
				this.getFullOffer(this.car.name);
			}
		},
		methods: {
			getFullOffer(name) {
				this.$api.get('/travel/travel/rentalcarcar/rentalcarTypeId', {
					name
				}).then(res => {
					if (res.data.code === 0) {
						this.$set(this.car, 'companyList', res.data.data);
					} else this.$showModal(res.data.msg);
				})
			},
			toCompany(item) {
				uni.navigateTo({
					url: '/pagesIndex/rentalCar/storeInfo?companyId=' + item.rentalcarCompanyId
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page {
		background: #F5F8FA;
		padding-bottom: 20rpx;

		.lunbo {
			width: 100%;
			height: 420rpx;
		}

		.bc_info {
			width: 100%;
			padding: 36rpx 24rpx 36rpx;
			box-sizing: border-box;
			border-radius: 24rpx 24rpx 0 0;
			background: #fff;
			margin-top: -20rpx;
			position: relative;
			z-index: 2;

			.bci_top {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.bcit_name {
					font-size: 32rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					color: #333333;
				}

				.bcit_bj {
					display: flex;
					align-items: center;

					text {
						font-size: 24rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #5A607C;
					}

					image {
						width: 24rpx;
						height: 24rpx;
					}
				}
			}

			.bci_pzs {
				margin-top: 24rpx;
				display: flex;
				align-items: center;

				&>view {
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #35465B;
					padding: 0 10rpx;
					position: relative;

					&:first-child {
						padding-left: 0;
					}

					&::after {
						content: "";
						width: 1rpx;
						height: 80%;
						background: #999999;
						position: absolute;
						right: 0;
						top: 10%;
					}

					&:last-child::after {
						width: 0;
					}
				}
			}

			.bci_price {
				margin-top: 30rpx;

				text {
					font-size: 40rpx;
					font-family: DINAlternate, DINAlternate;
					font-weight: bold;
					color: #FD3939;
				}

				span {
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #FF4141;
				}
			}

			.bci_tips {
				margin-top: 26rpx;
				overflow: hidden;

				&>image {
					width: 112rpx;
					height: 32rpx;
					margin-right: 16rpx;
					float: left;
				}

				.bcit_box {
					height: 32rpx;
					padding: 0 8rpx;
					border-radius: 4rpx;
					border: 1rpx solid #DCC7AB;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 20rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					color: #C9A771;
					float: left;
					margin-right: 16rpx;

					&.bb_dcyx {
						margin-right: 0;
					}
				}
			}

			.be_addr {
				margin-top: 24rpx;
				display: flex;
				align-items: center;

				image {
					width: 24rpx;
					height: 24rpx;
				}

				text {
					font-size: 26rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #879099;
					margin-left: 10rpx;
				}
			}
		}

		.b_item {
			width: calc(100% - 48rpx);
			margin: 20rpx 24rpx 0;
			border-radius: 16rpx;
		}
	}
</style>